<template>
  <div class="w-[300px] p-2 relative bg-white h-full print-style">
    <div class="flex text-xs">
      <div class="flex items-center w-[200px]">
        <div>病区/床号</div>
        <div class="flex-1 border border-solid border-x-0 border-t-0 ml-3">{{ tableData[0]?.cwh }}</div>
      </div>
      <div class="flex items-center w-[140px] ml-1">
        <div>姓名</div>
        <div class="flex-1 border border-solid border-x-0 border-t-0 ml-3">{{ tableData[0]?.brName }} {{ tableData[0]?.brXb }}</div>
      </div>
    </div>
    <div class="flex mt-2 text-xs">
      <!-- <div class="flex items-center w-[120px]">
        <div>住院号</div>
        <div class="flex-1 border border-solid border-x-0 border-t-0 ml-3">{{ tableData[0]?.zyh }}</div>
      </div> -->
      <div class="flex w-[200px]">
        <div>年龄</div>
        <div class="flex-1 border border-solid border-x-0 border-t-0 ml-3">{{ tableData[0]?.brAge }}</div>
      </div>
      <div class="flex items-center w-[140px] ml-1">
        <div>日期</div>
        <div class="flex-1 border border-solid border-x-0 border-t-0 ml-3">{{ dayjs().format('YYYY-MM-DD') }}</div>
      </div>
    </div>
    <div class="w-[260px] text-center mt-2">
      <BaseBarcode :value="tableData[0]?.zyh" :display-value="false" class="w-full text-center" />
    </div>
    <!-- <div class="flex justify-center items-center w-[260px] my-5" style="border: 2px solid #000">丨丨丨条形码丨丨丨</div> -->
    <div class="pl-2 text-xs mt-4 flex items-cente max-h-28">
      <!-- <div v-if="item.children?.length === 1" class="table-cell absolute"></div> -->
      <!-- <div v-if="item.children?.length === 2" class="table-cells absolute"></div> -->
      <div v-if="tableData[0]?.list?.length > 1" class="link-border-print"></div>
      <div>
        <div v-for="(item, index) in tableData[0]?.list" :key="index">{{ item.mcjldwgg }}</div>
      </div>
    </div>
    <div class="flex mt-1 text-xs">
      <div class="flex items-center w-[200px] my-1 mr-1">
        <div>配药时间</div>
        <div class="flex-1 border border-solid border-x-0 border-t-0 ml-3">{{ tableData[0]?.pysj }}</div>
      </div>
      <div class="flex items-center w-[200px]">
        <div>配药人</div>
        <div class="flex-1 border border-solid border-x-0 border-t-0 ml-3">{{ tableData[0]?.empName }}</div>
      </div>
    </div>
    <div class="flex text-xs">
      <div class="flex items-center w-[200px] my-1 mr-1">
        <div>核对者</div>
        <div class="flex-1 border border-solid border-x-0 border-t-0 ml-3">{{ tableData[0]?.shr }}</div>
      </div>
      <div class="flex items-center w-[200px]">
        <div>执行者</div>
        <div class="flex-1 border border-solid border-x-0 border-t-0 ml-3">{{ tableData[0]?.zxrName }}</div>
      </div>
    </div>
    <div class="flex mt-2 text-xs">{{ tableData[0]?.dqsy }}</div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'

const props = defineProps({
  printData: {
    type: Object,
    default: () => ({})
  }
})
const tableData = ref([])
watch(
  () => props.printData,
  (val) => {
    // 使用 reduce 方法来分组对象

    tableData.value = val.printData.detail.reduce((acc, item) => {
      const fid = item.fid
      // 检查累加器中是否已经有这个barcode的条目
      if (!acc.some((group) => group.fid === fid)) {
        // 如果没有，则创建一个新的条目
        acc.push({
          ...item,
          list: []
        })
      }
      // 找到对应的barcode条目，并向其list中添加yzmc和rq
      const group = acc.find((g) => g.fid === fid)
      group?.list.push({ ...item })
      return acc
    }, [])
  }
)
</script>
<style lang="less" scoped>
@media print {
  @page {
    size: 80 60;
  }
}
.link-border-print {
  width: 8px;
  margin: 0 5px;
  border: 2px solid #000000;
  border-right: none;
}
.table-border {
  @apply border border-solid  p-1;
}
</style>
